<template>
  <div class="order">
    <p class="deliver">配送方式</p>
    <div class="dz">
      <x-button mini :plain="true" type="default" class="sbtn">快递配送</x-button>
      <h3></h3>
    </div>
    <div class="address"><span>+</span>新增配送地址</div>
    <div class="snjs">
      <i></i>
      <img src="../../assets/logo.png" alt="">神农集市</div>
    <flexbox :gutter="0" class="order-sp">
      <flexbox-item>
        <div class="orderflex-sp">
          <!--里面在设置flexbox-->
          <flexbox>
            <flexbox-item :span="4" class="order-sp-img">
              <div><img src="../../../static/assets/logo.png" alt=""></div>
            </flexbox-item>
            <flexbox-item>
              <ul>
                <li>英德新鲜无花果3斤装</li>
                <li><i>规格</i>3斤装</li>
                <li>¥<strong>200</strong>.00</li>
              </ul>
            </flexbox-item>
          </flexbox>
        </div>
      </flexbox-item>
      <flexbox-item :span="2">
        <div class="flex-sp">X1</div>
      </flexbox-item>
    </flexbox>
    <sfooter></sfooter>
  </div>

</template>
<script>
  import {XButton,Flexbox,FlexboxItem} from 'vux'
  export default{
      components:{
        XButton,
        Flexbox,
        FlexboxItem,

      }

  }
</script>
<style>
  .order{
    background-color: #ccc;
  }
  .order .sbtn{
    color: red;
    border:1px solid red;
    border-radius: 15px;
    background-color: #fff;
  }
.deliver{
  text-align:left;
  height: 50px;
  line-height: 50px;
  margin-bottom:0;
  box-sizing: border-box;
  background-color: #fff;
  padding:0 10px 0 10px;
}
  h3{
    margin-top: 10px;
    border-top:1px solid red;
    background-color: #fff;
    padding:0 10px 0 10px;
  }
  /*地址*/
  .dz,.address{
    background-color: #fff;
    padding: 0 10px 0 10px;
  }
  .address span{
    width: 20px;
    height: 20px;
    display: inline-block;
    line-height: 18px;
    text-align: center;
    background-color: #22ac38;
    border-radius: 50%;
    color: #fff;
    font-size:25px;
  }
  /*神农集市*/
  .snjs{
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .snjs>i{
    display: block;
    width: 100%;
    height: 10px;
    background-color:#ccc;
  }
  .snjs img{
    width: 20px;
    height: 20px;
  }
  /*确认订单商品列表*/
  .order-sp{
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  .orderflex-sp {
    text-align: center;
    color: #1a191f;
    background-clip: padding-box;
  }
  .orderflex-sp .order-sp-img{
    width: 100px;
    height: 100px;
    background-color:pink;
    padding: 10px;
    box-sizing: border-box;
  }
  .orderflex-sp .order-sp-img img{
    width:100%;
    height: 100%;
  }

</style>
